<template>
  <div>
    <el-dropdown split-button type="primary" @command="handleCommand">添加查询结果元数据
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="VARCHAR">文本</el-dropdown-item>
        <el-dropdown-item command="DECIMAL">数字</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <el-table :data="params">
      <el-table-column label="字段名" width="120">
        <template slot-scope="pros">
          <el-input v-model="pros.row.columnField"></el-input>
        </template>
      </el-table-column>


    <el-table-column label="字段描述" width="120">
        <template slot-scope="pros">
          <el-input v-model="pros.row.columnDesc"></el-input>
        </template>
      </el-table-column>

      <el-table-column label="数据类型" width="120">
        <template slot-scope="pros">
          <span v-if="pros.row.columnDataType == 'text'">文本</span>
          <span v-if="pros.row.columnDataType == 'number'">数字</span>
         
        </template>

        <!-- TODO 添加更多查询组件支持 ，比如 时间，日期-->
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="pros">

              <el-button type="danger" icon="el-icon-delete" circle @click="remove(pros.$index)"></el-button>
          
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {

  data() {
    return {
      params: [],
    };
  },
  methods: {

    getResultConfig(){

      return this.params;
    },
     
     remove(index){
       
       this.params.splice(index,1);
 
     },
 
    handleCommand(command) {
      let newItem = {
        id:this.params.length,
        columnDataType: command,
        columnDesc:'字段描述',
        columnField: "result" + this.params.length,   
      };

      this.params.push(newItem);
    }
  }
};
</script>

<style>
</style>
